{% load i18n wagtailcore_tags %}

<div class="scal-outer">
<section class="scal-wrapper">

  {% if bloco.title %}
  <div class="scal-header">
    <h2 class="scal-titulo" {% if bloco.cor_title %}style="color: #{{ bloco.cor_title }};"{% endif %}>
      {{ bloco.title }}
    </h2>
  </div>
  {% endif %}

  {% if todos_itens %}

  {# ── Barra de filtros ── #}
  <div class="scal-filtros" role="group" aria-label="Filtros">

    {# Linha 1: Selects + Toggle de view #}
    <div class="scal-filtros-top">
      <div class="scal-selects">

        {% if areas_disponiveis|length > 1 %}
        <select class="scal-select" data-filtro="area" aria-label="Área">
          <option value="todos">Todas as áreas</option>
          {% for area in areas_disponiveis %}
          <option value="{{ area }}">{{ area }}</option>
          {% endfor %}
        </select>
        {% endif %}

        {% if anos_disponiveis %}
        <select class="scal-select" data-filtro="ano" aria-label="Ano">
          <option value="todos">Todos os anos</option>
          {% for ano in anos_disponiveis %}
          <option value="{{ ano }}">{{ ano }}</option>
          {% endfor %}
        </select>
        {% endif %}

        {% if meses_disponiveis %}
        <select class="scal-select" data-filtro="mes" aria-label="Mês">
          <option value="todos">Todos os meses</option>
          {% for item_mes in meses_disponiveis %}
          <option value="{{ item_mes.ano }}-{{ item_mes.mes|stringformat:'02d' }}">
            {{ item_mes.data_ref|date:"F Y"|capfirst }}
          </option>
          {% endfor %}
        </select>
        {% endif %}

      </div>

      <div class="scal-view-toggle" role="group" aria-label="Visualização">
        <button class="scal-view-btn scal-view-btn--ativo" data-view="kanban" title="Kanban" aria-pressed="true">
          <span class="material-symbols-outlined">view_kanban</span>
        </button>
        <button class="scal-view-btn" data-view="lista" title="Lista" aria-pressed="false">
          <span class="material-symbols-outlined">view_list</span>
        </button>
        <button class="scal-view-btn" data-view="calendario" title="Calendário" aria-pressed="false">
          <span class="material-symbols-outlined">calendar_month</span>
        </button>
      </div>
    </div>

    {# Linha 2: Chips de filtro #}
    <div class="scal-filtros-chips">
      <div class="scal-filtro-grupo">
        <span class="scal-filtro-label">Status</span>
        <div class="scal-chips">
          <button class="scal-chip scal-chip--ativo" data-filtro="status" data-valor="todos">Todos</button>
          <button class="scal-chip" data-filtro="status" data-valor="aberto">
            <span class="scal-chip-dot scal-dot--aberto"></span>Inscrições abertas
          </button>
          <button class="scal-chip" data-filtro="status" data-valor="previsto">
            <span class="scal-chip-dot scal-dot--previsto"></span>Previsto
          </button>
        </div>
      </div>
      <div class="scal-filtro-grupo">
        <span class="scal-filtro-label">Modalidade</span>
        <div class="scal-chips">
          <button class="scal-chip scal-chip--ativo" data-filtro="modalidade" data-valor="todos">Todos</button>
          <button class="scal-chip" data-filtro="modalidade" data-valor="presencial">
            <span class="material-symbols-outlined scal-chip-icon">location_on</span>Presencial
          </button>
          <button class="scal-chip" data-filtro="modalidade" data-valor="remoto">
            <span class="material-symbols-outlined scal-chip-icon">laptop</span>Remoto
          </button>
        </div>
      </div>
      <div class="scal-filtro-grupo">
        <span class="scal-filtro-label">Tipo</span>
        <div class="scal-chips">
          <button class="scal-chip scal-chip--ativo" data-filtro="tipo" data-valor="todos">Todos</button>
          <button class="scal-chip" data-filtro="tipo" data-valor="curso">Curso</button>
          <button class="scal-chip" data-filtro="tipo" data-valor="evento">Evento</button>
        </div>
      </div>
    </div>

  </div>
  <div class="scal-view" data-view-container="kanban">
    <div class="scal-board">

      {% for grupo in calendario %}
      <div class="scal-coluna"
           data-mes="{{ grupo.ano }}-{{ grupo.mes|stringformat:'02d' }}">

        <div class="scal-coluna-header">
          <span class="scal-coluna-titulo">{{ grupo.data_ref|date:"F" }}</span>
          <span class="scal-coluna-ano">{{ grupo.ano }}</span>
          <span class="scal-coluna-count"><span class="scal-mes-num">{{ grupo.itens|length }}</span></span>
        </div>

        <div class="scal-coluna-itens">
          {% for item in grupo.itens %}
          <div class="scal-card"
               data-status="{{ item.cal_status }}"
               data-modalidade="{{ item.cal_modalidade }}"
               data-tipo="{{ item.cal_tipo }}"
               data-area="{{ item.cal_area }}"
               data-ano="{{ item.data_inicio|date:'Y' }}"
               data-mes="{{ item.data_inicio|date:'Y-m' }}"
               data-dia="{{ item.data_inicio|date:'j' }}">

            {% if item.data_inicio %}
            <div class="scal-card-data">
              <span class="scal-card-dia">{{ item.data_inicio|date:"d" }}</span>
              <span class="scal-card-mes-abr">{{ item.data_inicio|date:"M" }}</span>
            </div>
            {% endif %}

            <div class="scal-card-body">
              <div class="scal-card-badges">
                {% if item.cal_tipo == 'evento' %}
                  <span class="scal-badge scal-badge--evento">Evento</span>
                {% else %}
                  <span class="scal-badge scal-badge--curso">Curso</span>
                {% endif %}
                {% if item.cal_status == 'aberto' %}
                  <span class="scal-badge scal-badge--aberto">Aberto</span>
                {% endif %}
                {% if item.cal_modalidade == 'presencial' %}
                  <span class="scal-badge scal-badge--modalidade">
                    <span class="material-symbols-outlined scal-badge-icon">location_on</span>Presencial
                  </span>
                {% else %}
                  <span class="scal-badge scal-badge--modalidade">
                    <span class="material-symbols-outlined scal-badge-icon">laptop</span>Remoto
                  </span>
                {% endif %}
              </div>

              {% if item.cal_nome %}
              <p class="scal-card-titulo">
                {% if item.url %}
                  <a href="{{ item.url }}" target="_blank" rel="noopener noreferrer" class="scal-card-link">{{ item.cal_nome }}</a>
                {% else %}
                  {{ item.cal_nome }}
                {% endif %}
              </p>
              {% endif %}

              <div class="scal-card-meta">
                {% if item.horario %}
                <span class="scal-meta-item">
                  <span class="material-symbols-outlined scal-meta-icon">schedule</span>{{ item.horario|slice:":5" }}
                </span>
                {% endif %}
                {% if item.carga_horaria %}
                <span class="scal-meta-item">
                  <span class="material-symbols-outlined scal-meta-icon">timer</span>{{ item.carga_horaria }}h
                </span>
                {% endif %}
              </div>
            </div>

          </div>
          {% endfor %}

          <div class="scal-coluna-vazia" style="display:none;">
            <span class="material-symbols-outlined">event_busy</span>
            <p>Sem itens</p>
          </div>
        </div>

      </div>
      {% endfor %}

    </div>
  </div>


  <div class="scal-view" data-view-container="lista" style="display:none;">
    <div class="scal-lista">

      {% for grupo in calendario %}
      <div class="scal-lista-grupo"
           data-mes="{{ grupo.ano }}-{{ grupo.mes|stringformat:'02d' }}">

        <div class="scal-lista-mes-header">
          <span class="scal-lista-mes-titulo">{{ grupo.data_ref|date:"F Y"|capfirst }}</span>
          <span class="scal-lista-mes-count"><span class="scal-lista-mes-num">{{ grupo.itens|length }}</span> itens</span>
        </div>

        <div class="scal-lista-itens">
          {% for item in grupo.itens %}
          <div class="scal-lista-row"
               data-status="{{ item.cal_status }}"
               data-modalidade="{{ item.cal_modalidade }}"
               data-tipo="{{ item.cal_tipo }}"
               data-area="{{ item.cal_area }}"
               data-ano="{{ item.data_inicio|date:'Y' }}"
               data-mes="{{ item.data_inicio|date:'Y-m' }}">

            {% if item.data_inicio %}
            <div class="scal-lista-data">
              <span class="scal-lista-dia">{{ item.data_inicio|date:"d" }}</span>
              <span class="scal-lista-mes-abr">{{ item.data_inicio|date:"M" }}</span>
            </div>
            {% endif %}

            <div class="scal-lista-badges">
              {% if item.cal_tipo == 'evento' %}
                <span class="scal-badge scal-badge--evento">Evento</span>
              {% else %}
                <span class="scal-badge scal-badge--curso">Curso</span>
              {% endif %}
              {% if item.cal_status == 'aberto' %}
                <span class="scal-badge scal-badge--aberto">Aberto</span>
              {% endif %}
            </div>

            <p class="scal-lista-nome">
              {% if item.url %}
                <a href="{{ item.url }}" target="_blank" rel="noopener noreferrer" class="scal-card-link">{{ item.cal_nome }}</a>
              {% else %}
                {{ item.cal_nome }}
              {% endif %}
            </p>

            <div class="scal-lista-meta">
              {% if item.cal_modalidade == 'presencial' %}
                <span class="scal-meta-item">
                  <span class="material-symbols-outlined scal-meta-icon">location_on</span>Presencial
                </span>
              {% else %}
                <span class="scal-meta-item">
                  <span class="material-symbols-outlined scal-meta-icon">laptop</span>Remoto
                </span>
              {% endif %}
              {% if item.horario %}
              <span class="scal-meta-item">
                <span class="material-symbols-outlined scal-meta-icon">schedule</span>{{ item.horario|slice:":5" }}
              </span>
              {% endif %}
              {% if item.carga_horaria %}
              <span class="scal-meta-item">
                <span class="material-symbols-outlined scal-meta-icon">timer</span>{{ item.carga_horaria }}h
              </span>
              {% endif %}
            </div>

          </div>
          {% endfor %}
        </div>

      </div>
      {% endfor %}

    </div>
  </div>


  <div class="scal-view" data-view-container="calendario" style="display:none;">
    <div class="scal-grid-cards"></div>
  </div>

  {# ── Estado vazio geral ── #}
  <div class="scal-vazio-filtro" style="display:none;" aria-live="polite">
    <span class="material-symbols-outlined scal-vazio-icon">calendar_today</span>
    <p>Nenhum item encontrado com os filtros selecionados.</p>
    <button class="scal-limpar-filtros">Limpar filtros</button>
  </div>

  {% else %}
  <div class="scal-vazio-filtro">
    <span class="material-symbols-outlined scal-vazio-icon">calendar_today</span>
    <p>Nenhum item disponível no momento.</p>
  </div>
  {% endif %}

</section>
</div>

<style>
  /* ── Wrapper ── */
  .scal-outer {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .scal-wrapper {
    width: 100%;
    max-width: 1200px;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  /* ── Título ── */
  .scal-header { text-align: center; }
  .scal-titulo { font-size: 40px; font-weight: 600; color: #434A54; margin: 0; }

  /* ── Filtros ── */
  .scal-filtros {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #F5F7FA;
    border-radius: 12px;
    padding: 20px 24px;
  }

  /* Linha 1: selects + toggle */
  .scal-filtros-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .scal-selects {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .scal-select {
    padding: 7px 32px 7px 12px;
    border-radius: 8px;
    border: 1.5px solid #C8D1E0;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%2358606E' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 8px center;
    -webkit-appearance: none;
    appearance: none;
    color: #58606E;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s;
    min-width: 140px;
  }
  .scal-select:focus { outline: none; border-color: #007D7A; }

  /* View toggle */
  .scal-view-toggle {
    display: flex;
    gap: 4px;
    background: #E8EDF5;
    border-radius: 8px;
    padding: 4px;
    flex-shrink: 0;
  }
  .scal-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #9AA3AF;
    cursor: pointer;
    transition: all 0.15s;
  }
  .scal-view-btn:hover { background: #fff; color: #58606E; }
  .scal-view-btn--ativo { background: #fff; color: #007D7A; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
  .scal-view-btn .material-symbols-outlined { font-size: 20px; }

  /* Linha 2: chips */
  .scal-filtros-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    border-top: 1px solid #E2E8F0;
    padding-top: 16px;
  }
  .scal-filtro-grupo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .scal-filtro-label {
    font-size: 12px;
    font-weight: 700;
    color: #58606E;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
  }
  .scal-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .scal-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 24px;
    border: 1.5px solid #C8D1E0;
    background: #fff;
    color: #58606E;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .scal-chip:hover { border-color: #007D7A; color: #007D7A; }
  .scal-chip--ativo { border-color: #007D7A; background: #007D7A; color: #fff; }
  .scal-chip--ativo:hover { background: #006161; }
  .scal-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .scal-dot--aberto   { background: #2E7D32; }
  .scal-dot--previsto { background: #9E9E9E; }
  .scal-chip-icon { font-size: 14px; line-height: 1; }

  /* ══════════════════════════════════════════
     VIEW: KANBAN
  ══════════════════════════════════════════ */
  .scal-board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 16px;
    align-items: flex-start;
    scrollbar-width: thin;
    scrollbar-color: #C8D1E0 transparent;
  }
  .scal-board::-webkit-scrollbar { height: 6px; }
  .scal-board::-webkit-scrollbar-track { background: transparent; }
  .scal-board::-webkit-scrollbar-thumb { background: #C8D1E0; border-radius: 3px; }

  .scal-coluna {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .scal-coluna--vazia-total { opacity: 0.4; }

  .scal-coluna-header {
    position: sticky;
    top: 0;
    background: #007D7A;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 1;
  }
  .scal-coluna-titulo {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-transform: capitalize;
    flex: 1;
  }
  .scal-coluna-ano { font-size: 13px; color: rgba(255,255,255,0.7); font-weight: 400; }
  .scal-coluna-count {
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
  }
  .scal-coluna-itens { display: flex; flex-direction: column; gap: 8px; }

  .scal-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    transition: box-shadow 0.15s, transform 0.15s;
  }
  .scal-card:hover { box-shadow: 0 4px 16px rgba(0,125,122,0.12); transform: translateY(-1px); }
  .scal-card--oculto { display: none; }
  .scal-card[data-tipo="curso"]    { border-left: 4px solid #FC7D5C; }
  .scal-card[data-tipo="evento"]   { border-left: 4px solid #1565C0; }
  .scal-card[data-status="aberto"] { border-left-color: #2E7D32; }

  .scal-card-data {
    flex-shrink: 0;
    width: 52px;
    background: #F5F7FA;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 4px;
    gap: 1px;
    border-right: 1px solid #E2E8F0;
    text-align: center;
  }
  .scal-card-dia { font-size: 22px; font-weight: 700; color: #007D7A; line-height: 1; }
  .scal-card-mes-abr {
    font-size: 10px;
    font-weight: 600;
    color: #9AA3AF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .scal-card-body {
    flex: 1;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .scal-card-badges { display: flex; flex-wrap: wrap; gap: 4px; }
  .scal-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
  }
  .scal-badge--evento    { border: 1px solid #1565C0; color: #1565C0; background: #EFF4FF; }
  .scal-badge--curso     { border: 1px solid #FC7D5C; color: #C0401A; background: #FFF4F1; }
  .scal-badge--aberto    { border: 1px solid #2E7D32; color: #2E7D32; background: #F0FBF1; }
  .scal-badge--previsto  { border: 1px solid #9E9E9E; color: #757575; background: #F5F5F5; }
  .scal-badge--modalidade { border: 1px solid #C8D1E0; color: #58606E; background: #F5F7FA; }
  .scal-badge-icon { font-size: 11px; line-height: 1; }

  .scal-card-titulo {
    font-size: 13px;
    font-weight: 600;
    color: #434A54;
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .scal-card-link { color: #007D7A; text-decoration: none; }
  .scal-card-link:hover { text-decoration: underline; }

  .scal-card-meta { display: flex; flex-wrap: wrap; gap: 8px; }
  .scal-meta-item { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #9AA3AF; }
  .scal-meta-icon { font-size: 13px; line-height: 1; }

  .scal-coluna-vazia {
    text-align: center;
    padding: 24px 12px;
    color: #C8D1E0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 2px dashed #EBEFF5;
    border-radius: 10px;
  }
  .scal-coluna-vazia .material-symbols-outlined { font-size: 28px; }
  .scal-coluna-vazia p { font-size: 12px; margin: 0; }

  /* ══════════════════════════════════════════
     VIEW: LISTA
  ══════════════════════════════════════════ */
  .scal-lista { display: flex; flex-direction: column; gap: 20px; }

  .scal-lista-grupo { display: flex; flex-direction: column; }

  .scal-lista-mes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #007D7A;
    border-radius: 10px 10px 0 0;
  }
  .scal-lista-mes-titulo { font-size: 14px; font-weight: 700; color: #fff; text-transform: capitalize; }
  .scal-lista-mes-count {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.15);
    padding: 2px 10px;
    border-radius: 10px;
  }

  .scal-lista-itens {
    border: 1px solid #E2E8F0;
    border-top: none;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
  }

  .scal-lista-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    border-bottom: 1px solid #F0F4F8;
    transition: background 0.12s;
  }
  .scal-lista-row:last-child { border-bottom: none; }
  .scal-lista-row:hover { background: #F8FAFC; }

  .scal-lista-data {
    flex-shrink: 0;
    width: 44px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .scal-lista-dia { font-size: 18px; font-weight: 700; color: #007D7A; line-height: 1; }
  .scal-lista-mes-abr {
    font-size: 10px;
    font-weight: 600;
    color: #9AA3AF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .scal-lista-badges { flex-shrink: 0; display: flex; gap: 4px; align-items: center; }

  .scal-lista-nome {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #434A54;
    margin: 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .scal-lista-meta {
    flex-shrink: 0;
    display: flex;
    gap: 12px;
    align-items: center;
  }

  /* ══════════════════════════════════════════
     VIEW: GRID DE CARDS
  ══════════════════════════════════════════ */
  .scal-grid-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .scal-grid-mes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #007D7A;
    border-radius: 10px;
    margin-bottom: 12px;
  }
  .scal-grid-mes-titulo { font-size: 14px; font-weight: 700; color: #fff; text-transform: capitalize; }
  .scal-grid-mes-count {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.15);
    padding: 2px 10px;
    border-radius: 10px;
  }
  .scal-grid-mes-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .scal-grid-mes-cards .scal-card {
    flex-direction: column;
    height: 100%;
  }
  .scal-grid-mes-cards .scal-card-data {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px 14px;
    border-right: none;
    border-bottom: 1px solid #E2E8F0;
  }
  .scal-grid-mes-cards .scal-card-dia { font-size: 18px; }
  @media (max-width: 960px) {
    .scal-grid-mes-cards { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .scal-grid-mes-cards { grid-template-columns: 1fr; }
  }

  /* ── Estado vazio geral ── */
  .scal-vazio-filtro {
    text-align: center;
    padding: 48px 20px;
    color: #9AA3AF;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .scal-vazio-icon { font-size: 48px; color: #C8D1E0; }
  .scal-limpar-filtros {
    padding: 8px 20px;
    border-radius: 24px;
    border: 1.5px solid #007D7A;
    background: #fff;
    color: #007D7A;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
  }
  .scal-limpar-filtros:hover { background: #007D7A; color: #fff; }

  /* ── Responsivo ── */
  @media (max-width: 640px) {
    .scal-wrapper { padding: 24px 16px; gap: 20px; }
    .scal-titulo { font-size: 28px; }
    .scal-filtros { padding: 16px; }
    .scal-filtros-top { flex-direction: column; align-items: flex-start; }
    .scal-selects { width: 100%; }
    .scal-select { flex: 1; min-width: 100px; }
    .scal-coluna { flex: 0 0 220px; }
    .scal-cal-dia, .scal-cal-dia-empty { min-height: 72px; padding: 4px; }
    .scal-cal-titulo-mes { font-size: 15px; min-width: 160px; }
    .scal-lista-meta { display: none; }
    .scal-lista-nome { white-space: normal; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  }
</style>

<script>
  (function () {
    /* ── Encontra o wrapper: currentScript é mais confiável, fallback por marca ── */
    var wrapper = null;
    if (document.currentScript) {
      wrapper = document.currentScript.closest('.scal-outer');
    }
    if (!wrapper) {
      var outers = document.querySelectorAll('.scal-outer:not([data-scal-init])');
      wrapper = outers[outers.length - 1] || null;
    }
    if (!wrapper) return;
    wrapper.setAttribute('data-scal-init', '1');

    var filtros = { area: 'todos', ano: 'todos', mes: 'todos', status: 'todos', modalidade: 'todos', tipo: 'todos' };
    var viewAtual = 'kanban';
    var viewManual = false; // true somente após clique manual no toggle

    // Estado do calendário
    var hoje = new Date();
    var calAno = hoje.getFullYear();
    var calMes = hoje.getMonth() + 1;

    // Inicializa com o primeiro mês disponível nos dados
    var primeiraColuna = wrapper.querySelector('.scal-coluna');
    if (primeiraColuna && primeiraColuna.dataset.mes) {
      var partsInit = primeiraColuna.dataset.mes.split('-');
      calAno = parseInt(partsInit[0]);
      calMes = parseInt(partsInit[1]);
    }

    /* ── Toggle de view ── */
    wrapper.querySelectorAll('.scal-view-btn').forEach(function (btn) {
      btn.addEventListener('click', function () {
        mudarView(btn.dataset.view, true);
      });
    });

    function mudarView(view, manual) {
      if (manual) viewManual = true;   // só seta true; nunca reseta para false aqui
      viewAtual = view;

      wrapper.querySelectorAll('.scal-view').forEach(function (el) {
        el.style.display = el.dataset.viewContainer === view ? '' : 'none';
      });
      wrapper.querySelectorAll('.scal-view-btn').forEach(function (btn) {
        var ativo = btn.dataset.view === view;
        btn.classList.toggle('scal-view-btn--ativo', ativo);
        btn.setAttribute('aria-pressed', ativo ? 'true' : 'false');
      });

      if (view === 'calendario') {
        // Se mês selecionado, vai direto para ele
        if (filtros.mes !== 'todos') {
          var parts = filtros.mes.split('-');
          calAno = parseInt(parts[0]);
          calMes = parseInt(parts[1]);
        }
        var nav = wrapper.querySelector('.scal-cal-nav');
        if (nav) nav.style.display = filtros.mes !== 'todos' ? 'none' : '';
        renderizarCalendario();
      }
    }

    /* ── Selects ── */
    wrapper.querySelectorAll('.scal-select').forEach(function (sel) {
      sel.addEventListener('change', function () {
        filtros[sel.dataset.filtro] = sel.value;
        if (sel.dataset.filtro === 'mes') {
          if (sel.value !== 'todos') {
            var parts = sel.value.split('-');
            calAno = parseInt(parts[0]);
            calMes = parseInt(parts[1]);
            mudarView('calendario', true);
          } else if (viewAtual === 'calendario') {
            viewManual = false;
          }
        }
        aplicarFiltros();
      });
    });

    /* ── Chips ── */
    wrapper.querySelectorAll('.scal-chip').forEach(function (btn) {
      btn.addEventListener('click', function () {
        var grupo = btn.dataset.filtro;
        filtros[grupo] = btn.dataset.valor;
        wrapper.querySelectorAll('.scal-chip[data-filtro="' + grupo + '"]')
          .forEach(function (b) { b.classList.remove('scal-chip--ativo'); });
        btn.classList.add('scal-chip--ativo');
        // Não altera viewManual — mantém a view atual
        aplicarFiltros();
      });
    });

    /* ── Limpar filtros ── */
    var btnLimpar = wrapper.querySelector('.scal-limpar-filtros');
    if (btnLimpar) {
      btnLimpar.addEventListener('click', function () {
        filtros = { area: 'todos', ano: 'todos', mes: 'todos', status: 'todos', modalidade: 'todos', tipo: 'todos' };
        wrapper.querySelectorAll('.scal-select').forEach(function (s) { s.value = 'todos'; });
        wrapper.querySelectorAll('.scal-chip[data-valor="todos"]').forEach(function (b) { b.classList.add('scal-chip--ativo'); });
        wrapper.querySelectorAll('.scal-chip:not([data-valor="todos"])').forEach(function (b) { b.classList.remove('scal-chip--ativo'); });
        viewManual = false; // reseta para auto-view
        aplicarFiltros();
      });
    }


    /* ── Filtro por item ── */
    function itemPassaFiltro(el) {
      return (
        (filtros.area       === 'todos' || el.dataset.area       === filtros.area) &&
        (filtros.ano        === 'todos' || el.dataset.ano        === filtros.ano) &&
        (filtros.mes        === 'todos' || el.dataset.mes        === filtros.mes) &&
        (filtros.status     === 'todos' || el.dataset.status     === filtros.status) &&
        (filtros.modalidade === 'todos' || el.dataset.modalidade === filtros.modalidade) &&
        (filtros.tipo       === 'todos' || el.dataset.tipo       === filtros.tipo)
      );
    }

    /* ── Aplicar filtros ── */
    function aplicarFiltros() {
      var totalVisiveis = 0;

      /* Kanban */
      wrapper.querySelectorAll('.scal-coluna').forEach(function (coluna) {
        var cards = coluna.querySelectorAll('.scal-card');
        var visiveis = 0;
        cards.forEach(function (card) {
          var ok = itemPassaFiltro(card);
          card.classList.toggle('scal-card--oculto', !ok);
          if (ok) { visiveis++; totalVisiveis++; }
        });
        var num = coluna.querySelector('.scal-mes-num');
        if (num) num.textContent = visiveis;
        var vazio = coluna.querySelector('.scal-coluna-vazia');
        if (vazio) vazio.style.display = visiveis === 0 ? 'flex' : 'none';
        coluna.classList.toggle('scal-coluna--vazia-total', visiveis === 0);
      });

      /* Lista */
      wrapper.querySelectorAll('.scal-lista-grupo').forEach(function (grupo) {
        var rows = grupo.querySelectorAll('.scal-lista-row');
        var visiveis = 0;
        rows.forEach(function (row) {
          var ok = itemPassaFiltro(row);
          row.style.display = ok ? '' : 'none';
          if (ok) visiveis++;
        });
        var numEl = grupo.querySelector('.scal-lista-mes-num');
        if (numEl) numEl.textContent = visiveis;
        grupo.style.display = visiveis === 0 ? 'none' : '';
      });

      /* Estado vazio */
      var vazioEl = wrapper.querySelector('.scal-vazio-filtro');
      if (vazioEl) vazioEl.style.display = totalVisiveis === 0 ? '' : 'none';

      /* Auto-view */
      if (!viewManual) {
        var autoView;
        if (totalVisiveis > 80) {
          autoView = 'lista';
        } else {
          autoView = 'kanban';
        }
        mudarView(autoView, false);
      } else if (viewAtual === 'calendario') {
        renderizarCalendario();
      }
    }

    /* ── Renderizar grid de cards ── */
    function renderizarCalendario() {
      var grid = wrapper.querySelector('.scal-grid-cards');
      if (!grid) return;
      grid.innerHTML = '';

      wrapper.querySelectorAll('[data-view-container="kanban"] .scal-coluna').forEach(function (coluna) {
        var cardsVisiveis = coluna.querySelectorAll('.scal-card:not(.scal-card--oculto)');
        if (cardsVisiveis.length === 0) return;

        var tituloEl = coluna.querySelector('.scal-coluna-titulo');
        var anoEl = coluna.querySelector('.scal-coluna-ano');
        var mesLabel = (tituloEl ? tituloEl.textContent.trim() : '') + (anoEl ? ' ' + anoEl.textContent.trim() : '');

        var header = document.createElement('div');
        header.className = 'scal-grid-mes-header';
        header.innerHTML =
          '<span class="scal-grid-mes-titulo">' + mesLabel + '</span>' +
          '<span class="scal-grid-mes-count">' + cardsVisiveis.length + ' itens</span>';
        grid.appendChild(header);

        var cardsContainer = document.createElement('div');
        cardsContainer.className = 'scal-grid-mes-cards';
        cardsVisiveis.forEach(function (card) {
          var clone = card.cloneNode(true);
          clone.classList.remove('scal-card--oculto');
          cardsContainer.appendChild(clone);
        });
        grid.appendChild(cardsContainer);
      });
    }

    /* ── Init ── */
    aplicarFiltros();
  }());
</script>